<template>
  <div>
    <div class="topBox">
      <BlueBox
        :title="'实时人数'"
        :stylefont="fontColorA"
        :count="count"
        :manCount="ssmanCount"
        :womanCount="sswomanCount"
      />
      <BlueBox
        :title="'进园人数'"
        :stylefont="fontColorB"
        :count="countB"
        :manCount="mantoCount"
        :womanCount="womantoCount"
      />
      <BlueBox
        :title="'出园人数'"
        :stylefont="fontColorA"
        :count="countC"
        :manCount="manoutCount"
        :womanCount="womanoutCount"
      />
    </div>
    <div style="display: flex; justify-content: space-between">
      <BlueBox2
        :stylecolor="fontColorA"
        :titleCar="'今日来访人员'"
        :carNum="today_visit_user_num"
        :jytcarNum="compare_ytd_visit_user_num"
      />
      <BlueBox2
        :stylecolor="fontColorB"
        :titleCar="'今日申报人员'"
        :carNum="today_sb_user_num"
        :jytcarNum="compare_ytd_sb_user_num"
      />
    </div>
  </div>
</template>

<script>
import BlueBox from "components/blueBox";
import BlueBox2 from "components/blueBox2";
import { mapState } from "vuex";

export default {
  name: "PersonnelCom",
  components: { BlueBox, BlueBox2 },
  data() {
    return {
      fontColorA: {
        color: "rgb(247, 248, 149)",
      },
      fontColorB: {
        color: "rgb(4, 242, 254)",
      },
      count: 0,
      countB: 0,
      countC: 0,
      ssmanCount: 0,
      sswomanCount: 0,
      mantoCount: 0,
      womantoCount: 0,
      manoutCount: 0,
      womanoutCount: 0,
      today_sb_user_num: 0, // 今日申报人数
      today_visit_user_num: 0, //今日来访人数
      compare_ytd_sb_user_num: 0, //  申报人数较昨日（大于0箭头朝上小于0朝下）
      compare_ytd_visit_user_num: 0, // 来访人数较昨日（大于0箭头朝上小于0朝下）
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      peoCount: (state) => state.winconcrol.socketMessage, //这是mapState的使用方式
    }),
  },
  watch: {
    peoCount(n, o) {
      const { source } = n;

      if (source == 1000) {
        const {
          in_user_num = 0,
          out_user_num = 0,
          real_time_user_num = 0,
          in_user_num_1 = 0,
          in_user_num_2 = 0,
          out_user_num_1 = 0,
          out_user_num_2 = 0,
          real_time_user_num_1 = 0,
          real_time_user_num_2 = 0,
          today_sb_user_num = 0, // 今日申报人数
          today_visit_user_num = 0, //今日来访人数
          compare_ytd_sb_user_num = 0, //  申报人数较昨日（大于0箭头朝上小于0朝下）
          compare_ytd_visit_user_num = 0, // 来访人数较昨日（大于0箭头朝上小于0朝下）
        } = n;
        this.count = real_time_user_num;
        this.countB = in_user_num;
        this.countC = out_user_num;
        this.ssmanCount = real_time_user_num_1;
        this.sswomanCount = real_time_user_num_2;
        this.mantoCount = in_user_num_1;
        this.womantoCount = in_user_num_2;
        this.manoutCount = out_user_num_1;
        this.womanoutCount = out_user_num_2;
        this.today_sb_user_num = today_sb_user_num;
        this.today_visit_user_num = today_visit_user_num;
        this.compare_ytd_sb_user_num = compare_ytd_sb_user_num;
        this.compare_ytd_visit_user_num = compare_ytd_visit_user_num;
      }
    },
  },
  methods: {
    peoCount1() {
      const { source } = this.peoCount;

      if (source == 1000) {
        const {
          in_user_num = 0,
          out_user_num = 0,
          real_time_user_num = 0,
          in_user_num_1 = 0,
          in_user_num_2 = 0,
          out_user_num_1 = 0,
          out_user_num_2 = 0,
          real_time_user_num_1 = 0,
          real_time_user_num_2 = 0,
          today_sb_user_num = 0, // 今日申报人数
          today_visit_user_num = 0, //今日来访人数
          compare_ytd_sb_user_num = 0, //  申报人数较昨日（大于0箭头朝上小于0朝下）
          compare_ytd_visit_user_num = 0, // 来访人数较昨日（大于0箭头朝上小于0朝下）
        } = this.peoCount;
        this.count = real_time_user_num;
        this.countB = in_user_num;
        this.countC = out_user_num;
        this.ssmanCount = real_time_user_num_1;
        this.sswomanCount = real_time_user_num_2;
        this.mantoCount = in_user_num_1;
        this.womantoCount = in_user_num_2;
        this.manoutCount = out_user_num_1;
        this.womanoutCount = out_user_num_2;
        this.today_sb_user_num = today_sb_user_num;
        this.today_visit_user_num = today_visit_user_num;
        this.compare_ytd_sb_user_num = compare_ytd_sb_user_num;
        this.compare_ytd_visit_user_num = compare_ytd_visit_user_num;
      }
    },
  },
  mounted() {
    this.peoCount1();
  },
};
</script>
<style lang="less" scoped>
.topBox {
  display: flex;
  justify-content: space-between;
  padding: 0.68vw 0 0 0;
}
</style>
